<template>
    <div class="mainBox">
        <!-- <div>
            <el-breadcrumb separator="/">
                <el-breadcrumb-item
                    ><a
                        href="../index.html"
                        style="font-weight: 500;font-size: 16px;"
                        >智提升</a
                    ></el-breadcrumb-item
                >
                <el-breadcrumb-item>
                    <span style="font-size: 16px;">自评</span>
                </el-breadcrumb-item>
            </el-breadcrumb>
        </div> -->

        <div class="titleRow">
            <div class="title">自评</div>
            <div>
                <el-button size="medium" @click="goBack"> 返回 </el-button>
                <el-button
                    size="medium"
                    round
                    style="background-color: #018854;color: #FFFFFF;"
                    @click="toExam"
                    >开始自评</el-button
                >
            </div>
        </div>

        <div class="bodyBox">
            <div class="rowDivTitle">名称：{{ title }}</div>
            <div class="rowDivBox">
                <div class="rowDiv">
                    <span>试卷总分：</span>
                    <span class="itemSubTitle">{{ score }}分</span>
                    <span class="itemSubTitle">{{ pass_mark }}分及格</span>
                </div>
                <div class="rowDiv">
                    <span>考试时长：</span>
                    <span class="itemSubTitle">{{ examtime }}分钟</span>
                </div>
                <div style="margin-right: 30px;" class="rowDiv">
                    <span>考试难度：</span>
                    <span>{{ Number(level).toFixed(1) }}</span>
                    <span class="itemSubTitle">5.0级难度最高</span>
                </div>
            </div>
            <div>
                考试数量：<span class="itemSubTitle">{{ qunum }}题</span>
            </div>
            <el-divider></el-divider>
            <div class="rowDivTitle">批改方式</div>
            <div>
                <el-radio-group v-model="radioValue">
                    <el-radio label="0" border size="small">自行批改</el-radio>
                    <el-radio label="1" border size="small">他人批改</el-radio>
                </el-radio-group>
            </div>
        </div>
    </div>
</template>

<script>
import { examDetail } from "@/api/test/exam/index";
import { SelfTestAdd } from "@/api/test/selfTest/index";
export default {
    components: {},
    props: {},
    data() {
        return {
            examtime: "", // 考试时间
            qunum: "", // 题目数量
            eid: "", // 需要传到下一个页面的eid
            radioValue: "0", // 需要传到下一个页面的 批改方式
            title: "", // 需要传到下一个页面的开始会话
            score: "",
            pass_mark: "",
            level: "",
            sid: "",
            subject: "",
            test_type: ""
        };
    },
    computed: {},
    watch: {},
    mounted() {
        // 生命周期钩子：模板编译、挂载之后（此时不保证已在 document 中）
        this.eid = this.$route.query.eid;
        /* data.eid 为上个页面传过来的数据 发送试卷信息请求 */
        // 初始化数据
        console.log("eid", this.eid);
        this.initialiationData();
    },
    methods: {
        initialiationData() {
            examDetail({
                eid: this.eid
            }).then(res => {
                if (res.code === 200) {
                    let data = res.data;
                    this.title = data.ename;
                    this.score = data.total_score;
                    this.pass_mark = data.pass_mark;
                    this.examtime = data.time;
                    this.level = data.level;
                    this.qunum = data.exam_questions_num;
                    this.sid = data.sid;
                    this.subject = data.subject_name;
                    this.test_type = data.kind_type_id;
                }
            });
        },
        // 返回上一层
        goBack() {
            this.$router.go(-1); //返回上一层
        },
        toExam() {
            var pg_type = "";
            if (this.radioValue == "0") {
                pg_type = 1;
            } else {
                pg_type = 2;
            }
            // eid: this.eid,
            var createData = {
                eid: this.eid,
                sid: this.sid,
                score: this.score,
                subject: this.subject,
                title: this.title,
                level: this.level,
                pg_type: pg_type,
                test_type: this.test_type
            };
            SelfTestAdd(createData).then(res => {
                let data = res.data;
                var selftest_log_id = Number(data.selftest_log_id);
                // 如果存在会话  保存 existExam到缓存  (下次 进入页面 判断是否显示弹窗)
                this.$store.commit("user/SETTING_EXISTEXAM", true);
                this.$store.commit("user/SETTING_CHECKTYPE", this.radioValue);
                console.log("SETTING_CHECKTYPE", this.$store.getters.checkType);
                this.$router.push({
                    path: "/selfEvaluation/examination/index",
                    query: {
                        eid: this.eid,
                        selftest_log_id: selftest_log_id,
                        examtime: this.examtime
                    }
                });
            });
        }
    }
};
</script>

<style lang="scss" scoped>
.mainBox {
    width: 100%;
    padding: 26px;
    box-sizing: border-box;
    .title {
        font-size: 20px;
        color: #2d3440;
    }
}
.titleRow {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 20px;
    margin-bottom: 20px;
}
.bodyBox {
    width: 100%;
    background-color: #ffffff;
    border-radius: 8px;
    margin-top: 38px;
    padding: 24px;
    padding-bottom: 50px;
    box-sizing: border-box;
    .rowDiv {
        margin-bottom: 20px;
        font-size: 14px;
        color: #2d3440;
    }
}
.rowDivBox {
    display: flex;
    justify-content: space-between;
}
.rowDivTitle {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 20px;
    color: #2d3440;
}
.itemSubTitle {
    color: #9ea4b0;
    margin-left: 5px;
}
.el-radio {
    margin-right: 0;
    &.is-bordered {
        &.is-checked {
            border-color: #18db60;
        }
    }
}
.el-radio--small {
    &.is-bordered {
        padding: 8px 25px 0 20px;
    }
}
.el-radio__input {
    &.is-checked {
        & + .el-radio__label {
            color: #18db60;
        }
        .el-radio__inner {
            border-color: #18db60;
            background: #18db60;
        }
    }
}
</style>
